<!-- 班次预览 -->

<template>
  <div class="Schedule-QueuePreview">
    <div>
      <div :style="timeStyle" />
      <div :style="relaxStyle" />
      <div :style="timeStyleExtra" />
      <div :style="relaxStyleExtra" />
    </div>

    <div v-if="hasText" class="alignCenter">
      <span>{{ timeText }}</span>
      <span v-if="obj && obj.relaxBegin !== obj.relaxEnd">{{ relaxText }}</span>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import props from './props'
import UTIL from '../../UTIL'

const DIVISOR = UTIL.TOTAL / 100

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'QueuePreview',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 班时文本
     */
    timeText() {
      const { timeName, timeBegin, timeEnd } = this.obj || {}
      if (!timeBegin || !timeEnd) return '休息日'

      return `${timeName || '班时'} ：${timeBegin} - ${timeEnd}`
    },

    /**
     * 休息时间文本
     */
    relaxText() {
      const { relaxBegin, relaxEnd } = this.obj || {}
      return `休息时间 ：${relaxBegin} - ${relaxEnd}`
    },

    /**
     * 班时样式
     */
    timeStyle() {
      const { timeBegin, timeEnd, backColor } = this.obj || {}
      if (!timeBegin || !timeEnd) return null

      const begin = UTIL.transNum(timeBegin)
      let end = UTIL.transNum(timeEnd, timeBegin)
      if (end > UTIL.TOTAL) end = UTIL.TOTAL

      return {
        left: `${begin / DIVISOR}%`,
        width: `${(end - begin) / DIVISOR}%`,
        backgroundColor: backColor || 'red',
      }
    },

    /**
     * 休息时间样式
     */
    relaxStyle() {
      const { timeBegin, relaxBegin, relaxEnd } = this.obj || {}
      if (!relaxBegin || !relaxEnd) return { width: '0' }

      let begin = UTIL.transNum(relaxBegin, timeBegin)
      let end = UTIL.transNum(relaxEnd, timeBegin)
      if (begin > UTIL.TOTAL) begin = UTIL.TOTAL
      if (end > UTIL.TOTAL) end = UTIL.TOTAL

      return {
        left: `${begin / DIVISOR}%`,
        width: `${(end - begin) / DIVISOR}%`,
      }
    },

    /**
     * 跨天的额外班时样式
     */
    timeStyleExtra() {
      const { timeBegin, timeEnd, backColor } = this.extra || {}
      if (!timeBegin || !timeEnd || timeBegin < timeEnd) return null

      const begin = UTIL.transNum('24:00')
      const end = UTIL.transNum(timeEnd, timeBegin)

      return {
        left: '0',
        width: `${(end - begin) / DIVISOR}%`,
        backgroundColor: backColor || 'red',
      }
    },

    /**
     * 跨天的额外休息时间样式
     */
    relaxStyleExtra() {
      const { timeBegin, relaxBegin, relaxEnd } = this.extra || {}
      if (!relaxBegin || !relaxEnd || timeBegin < relaxEnd) return { width: '0' }

      let begin = UTIL.transNum(relaxBegin, timeBegin)
      const end = UTIL.transNum(relaxEnd, timeBegin)
      if (begin < UTIL.TOTAL) begin = UTIL.TOTAL

      return {
        left: `${(begin - UTIL.TOTAL) / DIVISOR}%`,
        width: `${(end - begin) / DIVISOR}%`,
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
